<template>
  <div class="c-vote">
    <table>
      <tbody>
        <tr>
          <th>操作</th>
          <th>姓名</th>
          <th>分数</th>
          <th>评价</th>
        </tr>
        <tr v-for="(user,index) in userList" :key="index">
          <td>
            <a-button type="danger" @click="delUser(index)">弃权</a-button>
          </td>
          <td>{{user.name}}</td>
          <td>
            <a-input-number
              v-model="user.point"
              :min="0"
              :max="100"
              placeholder="0-100"
              style="width:200px"
            />
          </td>
          <td>
            <!-- <textarea class="textarea"></textarea> -->
            <a-textarea v-model="user.remark" class="textarea" placeholder="可选"></a-textarea>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="btn-box">
      <a-button type="primary" @click="onOkBtnClick">提交</a-button>
      <a-modal
        title="提示"
        :visible="isModalShow"
        :confirm-loading="confirmLoading"
        cancel-text="取消"
        @ok="submit"
        @cancel="cancel"
      >
        <p>每个人只有一次评分机会，提交后不可更改。确定提交吗？</p>
      </a-modal>
    </div>
  </div>
</template>
<script>
import api from '~/assets/js/common/api'
export default {
  data() {
    return {
      isModalShow: false,
      confirmLoading: false,
      userList: [
        {
          name: '蔺桂芬',
          id: 3,
          point: '',
          remark: ''
        },
        {
          name: '翟晶晶',
          id: 17,
          point: '',
          remark: ''
        },
        {
          name: '成媛',
          id: 10,
          point: '',
          remark: ''
        },
        {
          name: '王庆磊',
          id: 20,
          point: '',
          remark: ''
        },
        {
          name: '史健程',
          id: 15,
          point: '',
          remark: ''
        },
        {
          name: '胡霞',
          id: 22,
          point: '',
          remark: ''
        },
        {
          name: '唐晓璐',
          id: 12,
          point: '',
          remark: ''
        },
        {
          name: '张磊',
          id: 7,
          point: '',
          remark: ''
        },
        {
          name: '张耀伟',
          id: 11,
          point: '',
          remark: ''
        },
        {
          name: '回天力',
          id: 13,
          point: '',
          remark: ''
        },
        {
          name: '张淼',
          id: 25,
          point: '',
          remark: ''
        },
        {
          name: '武淑惠',
          id: 14,
          point: '',
          remark: ''
        },
        {
          name: '张清山',
          id: 18,
          point: '',
          remark: ''
        },
        {
          name: '左康生',
          id: 5,
          point: '',
          remark: ''
        },
        {
          name: '陶蒙',
          id: 16,
          point: '',
          remark: ''
        },
        {
          name: '王伟',
          id: 4,
          point: '',
          remark: ''
        },
        {
          name: '李婷婷',
          id: 21,
          point: '',
          remark: ''
        },
        {
          name: '綦旭',
          id: 28,
          point: '',
          remark: ''
        }
      ]
    }
  },
  mounted() {
    let userId = this.$store.state.user.user.id
    let newList = []
    this.userList.forEach(ele => {
      if (ele.id !== userId) {
        newList.push(ele)
      }
    })
    this.userList = newList
  },
  methods: {
    onOkBtnClick() {
      if (this.userList.length < 1) {
        this.$message.error('不能全部弃权，点击刷新重新投票')
        return
      }
      // 不能低于50分
      let isHave50 = false
      this.userList.forEach(ele => {
        if (ele.point < 50) {
          isHave50 = true
        }
      })
      if (isHave50) {
        this.$message.error('打分不能低于50分')
        return;
      }
      this.isModalShow = true
    },
    hideModal() {
      this.isModalShow = false
    },
    async submit() {
      this.confirmLoading = true

      let { data } = await this.$axios.post(api.vote.submit, {
        voteData: this.userList
      })
      this.confirmLoading = false
      this.hideModal()
      if (data.state === 0) {
        this.$message.info('提交成功')
      } else {
        this.$message.error(data.msg)
      }
    },
    cancel() {
      this.hideModal()
    },
    delUser(index) {
      this.userList.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
table {
  background-color: #fff;
  margin: 20px auto 0;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #e6e6e6;
    padding: 6px 8px;
  }
  input {
    border-radius: 3px;
  }
}
</style>
<style lang="scss" scoped>
.c-vote {
  background-color: #fff;
  margin-top: 20px;
}

.textarea {
  width: 500px;
  min-height: 50px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  transition: border-color 0.3s;
  padding: 5px;
  resize: vertical;
  &:hover {
    border-color: #40a9ff;
  }
  &:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
}
.btn-box {
  text-align: center;
  padding: 20px;
}
</style>